<template>
  <div>
    <comm-back></comm-back>
    <div class="bg"></div>
    <div class="body">
      <div class="seletion">
        <div class="ontravel">
          <van-field
            v-model="goCity"
            is-link
            readonly
            label="出发地"
            placeholder="请选择所在地区"
            active-color="#1989fa"
            @click="show = true"
          />
          <van-popup v-model="show" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择所在地区"
              :options="cityList"
              @close="show = false"
              @finish="onFinish"
            />
          </van-popup>
        </div>
        <div class="totravel">
          <van-field
            v-model="toCity"
            is-link
            readonly
            label="目的地"
            placeholder="请选择所在地区"
            active-color="#1989fa"
            @click="show2 = true"
          />
          <van-popup v-model="show2" round position="bottom">
            <van-cascader
              v-model="cascaderValue2"
              title="请选择所在地区"
              :options="cityList"
              @close="show2 = false"
              @finish="toFinish"
            />
          </van-popup>
        </div>
        <van-button type="primary" block @click="search"
          >查询出行政策</van-button
        >
      </div>
      <div class="cityinfo">
        <div class="from">
          {{ fromInfo.low_in_desc }}{{ fromInfo.out_desc }}
        </div>
        <div class="to">{{ toInfo.low_in_desc }}{{ toInfo.out_desc }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CommBack from "@/components/CommBack.vue";
import api from "@/api";
import { Notify } from "vant";
export default {
  name: "Travel",
  components: {
    CommBack,
    [Notify.Component.name]: Notify.Component,
  },
  data() {
    return {
      show: false,
      show2: false,
      goCity: "",
      toCity: "",
      go: "", //出发的 id值
      to: "", //回来的 id值
      cascaderValue: "",
      cascaderValue2: "",
      cityList: [],
      fromInfo: {},
      toInfo: {},
      // 选项列表，children 代表子选项，支持多级嵌套
      // options: [
      //   {
      //     text: "浙江省",
      //     value: "330000",
      //     children: [{ text: "杭州市", value: "330100" }],
      //   },
      //   {
      //     text: "江苏省",
      //     value: "320000",
      //     children: [{ text: "南京市", value: "320100" }],
      //   },
      // ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions, tabIndex }) {
      this.show = false;
      this.goCity = selectedOptions.map((option) => option.text).join("/");
      this.go = value;
    },
    toFinish({ value, selectedOptions, tabIndex }) {
      this.show2 = false;
      this.toCity = selectedOptions.map((option) => option.text).join("/");
      this.to = value;
    },
    search() {
      if (!this.to || !this.go)
        return Notify({ type: "warning", message: "请选择出行城市！" });
      //console.log(this.to, this.go);
      api
        .getTravelQuery({
          from: this.go,
          to: this.to,
        })
        .then((res) => {
          //console.log(res);
          if (res.status !== 200)
            return console.log("城市列表获取失败！" + res);
          //console.log(res.data.result.from_info);
          this.fromInfo = res.data.data.from_info;
          this.toInfo = res.data.data.to_info;
        });
    },
  },
  created() {
    //获取城市列表
    api.getTravelCity().then((res) => {
      if (res.status !== 200) return console.log("城市列表获取失败！" + res);
      //console.log(res);
      res.data.data.forEach((item) => {
        let children = [];
        item.cities.forEach((i) => {
          children.push({ text: i.city, value: i.city_id });
        });
        this.cityList.push({
          text: item.province,
          value: item.province_id,
          children: children,
        });
      });
    });
  },
};
</script>

<style lang="less" scoped>
.bg {
  position: relative;
  margin-bottom: -44%;
  padding-top: 74.7%;
  width: 100%;
  height: 0;
  background-image: url(../../assets/img/travel-bg.png);
  background-size: cover;
}
.body {
  position: relative;
  z-index: 1;
  padding: 15px;
  // margin-top: -200px;
  // background-color: pink;
  .seletion {
    padding: 10px 0;
  }
  .van-button--block {
    margin: 10px 0;
  }
}
</style>